<template>
    <el-card>
      <div class="card-header">
        <span>{{ title }}</span>
      </div>
      <div class="card-body">
        <h2>{{ value }}</h2>
      </div>
    </el-card>
  </template>
  
  <script setup>
  import { defineProps } from 'vue';
  
  const props = defineProps({
    // 卡片标题
    title: {
      type: String,
      required: true
    },
    // 卡片显示的值
    value: {
      type: [String, Number],
      required: true
    }
  });
  </script>
  
  <style scoped>
  .card-header {
    font-size: 16px;
    color: #666;
  }
  .card-body {
    margin-top: 10px;
  }
  .card-body h2 {
    margin: 0;
    font-size: 24px;
    color: #333;
  }
  </style>